import $ from 'jquery';
import 'popper.js';
import 'bootstrap';

import http from 'axios'

$('#create-todo').on('click', function () {
  http({
    method: 'POST',
    url: 'http://localhost:3000/todos',
    data: {
      content: $('.content-text').val()
    }
  }).then((res) => {
    $(`<li class="list-group-item" data-id="${res.data.id}">${res.data.content}</li>`)
      .appendTo('.list-group')
  })
})


$('.list-group').on('click', '.list-group-item', function () {
  location.href = `show.html?id=${$(this).data('id')}`
})


http({
  method: 'GET',
  url: 'http://localhost:3000/todos',
  }).then((res) => {
    const {data} = res
    if (data.length > 0) {
      data.map((item) => {
        $(`<li class="list-group-item" data-id="${item.id}">${item.content}</li>`)
          .appendTo('.list-group')
      })
    } else {
      $(`<div class="alert alert-dark text-center">暂无数据!</div>`)
        .appendTo('.list-group')
    }
})

















/*http.get('http://localhost:3000/todos')
  .then((res) => {
    console.log(res.data)
  })*/

/*http({
  method: 'GET',
  url: 'http://localhost:3000/todos',
}).then((res) => {
  console.log(res.data)
})*/



/*$('#create-todo').on('click', function () {
  // console.log()
  $.ajax({
    type: 'POST',
    url: 'http://localhost:3000/todos',
    data: {
      content: $('.content-text').val()
    },
    success(res) {
      $(`<li class="list-group-item">${res.content}</li>`)
        .appendTo('.list-group')
    }
  })
})

$.ajax({
  type: 'GET',
  url: 'http://localhost:3000/todos',
  success(res) {

    if (res.length > 0) {
      res.map((item) => {
        $(`<li class="list-group-item">${item.content}</li>`)
          .appendTo('.list-group')
      })
    } else {
      $(`<div class="alert alert-dark text-center">暂无数据!</div>`)
        .appendTo('.list-group')
    }
  }
})*/

